<template>
  <div class="goods-item" @click="onNavigate">
    <div class="pic">
      <img
        width="100%"

        :src="img"
      />
    </div>
    <p class="title">{{ title }}</p>
    <div class="bottos">
      <!-- <p class="desc">{{ desc }}</p> -->
      <div class="num">
        <span class="num__now">¥{{ price }}</span>
        <span class="num__old" v-if="type !=='snapped'">¥{{ discount }}</span>
            <!-- <span>X{{count}}</span> -->
      </div>
      <div class="btn-wrapper">
        <van-button class="btn" size="small" @click.stop="addCart">{{type !=="snapped" ? (priceType == 2? '立即兑换':'立即购买'):'立即采购'}}</van-button>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['goodsId', 'img', 'title', 'desc', 'price', 'discount','type','priceType'],
  methods: {
    onNavigate() {
      console.log(this.type)
      if(this.type !=="snapped"){
        this.$router.push({
          path: `/detail/${this.goodsId}`
        })
      }
    },
    addCart(){
      if(this.type =="snapped"){
        this.$emit('submit')
      }else{
        this.onNavigate()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.van-button{
  width: 108px;
  font-size: 18px;
  height: 40px;
}
.van-image__img{
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.goods-item {
  position: relative;
  margin-top: 20px;
  background-color: #fff;
  width: 350px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  .pic {
    display: block;
    // padding-top: 14px;
    // padding: 14px;
    // background: #f5f5f5;
  }
  .title {
    padding:0 14px;
    font-size: $small;
    color: $black;
    // text-align: center;
    // @include text-ellipsis;
    @include text-multiple-ellipsis;
  }
  .desc {
    padding: 14px;
    padding-top: 0;
    font-size: $small;
    color: $gray;
    text-align: center;
    @include text-ellipsis;
  }
  .bottos{
    box-sizing: border-box;
    width: 100%;
    padding-right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .num {
    // padding-bottom: 14px;
    padding-left: 14px;
    // text-align: center;
    .num__now {
      font-family: DIN-Medium, DIN;
      font-size: 24px;
      font-weight: 500;
      color: $red;
      // color: #efc379;

      margin-right: 10px;
    }
    .num__old {
      font-family: DIN-Medium, DIN;
      font-size: 16px;
      font-weight: 400;
      color: $gray;
      text-decoration: line-through;
      margin-right: 10px;
    }
  }
  .btn-wrapper {
    // display: flex;
    // flex-direction: row;
    // justify-content: center;
    // padding-bottom: 44px;
    .btn {
      background: $red;
      // background-color: #efc379;
      color: #fff;
      border: none;
    }
  }
}
</style>
